<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input
        style="width: 200px"
        placeholder="请输入名称"
        suffix-icon="el-icon-search"
        clearable
        v-model="name"
      ></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load"
        >查询 <i class="el-icon-search"></i
      ></el-button>
      <el-button type="warning" style="margin-left: 5px" @click="reset"
        >重置表单 <i class="el-icon-refresh"></i
      ></el-button>
      <el-upload
        action="http://localhost:8090/file/upload"
        :show-file-list="false"
        :on-success="handleFileUploadSuccess"
        style="display: inline-block"
      >
        <el-button type="primary" style="margin-left: 5px"
          >上传文件 <i class="el-icon-upload2"></i
        ></el-button>
      </el-upload>
      <el-popconfirm
        style="margin-left: 5px"
        confirm-button-text="确定"
        cancel-button-text="我再想想"
        icon="el-icon-info"
        icon-color="red"
        title="您确定删除吗？"
        @confirm="handleDelBatch"
      >
        <el-button type="danger" slot="reference"
          >批量删除 <i class="el-icon-remove-outline"></i
        ></el-button>
      </el-popconfirm>
    </div>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      border
      stripe
      :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
      min-height="484px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column
        prop="name"
        label="文件名称"
        width="240"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="文件类型"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="size"
        label="文件大小(kb)"
        width="160"
      ></el-table-column>
      <el-table-column label="预览" width="80">
        <template v-slot="scope">
          <el-button type="primary" @click="preview(scope.row.url)"
            >预览</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="启用" width="80">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.enable"
            active-color="#13ce66"
            inactive-color="#ccc"
            @change="changeEnable(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="1000">
        <template v-slot="scope">
          <el-button type="primary" @click="download(scope.row.url)"
            >下载 <i class="el-icon-download"></i
          ></el-button>
          <el-popconfirm
            style="margin-left: 5px"
            confirm-button-text="确定"
            cancel-button-text="我再想想"
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除吗？"
            @confirm="handleDel(scope.row.id)"
          >
            <el-button type="danger" slot="reference"
              >删除 <i class="el-icon-remove-outline"></i
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="centerDialogVisible"
      width="40%"
      center
      :show-close="false"
    >
      <img :src="previewImg" alt="" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'File',
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      name: '',
      multipleSelection: [],
      isLoading: false,
      centerDialogVisible: false,
      previewImg: ''
    }
  },
  created() {
    // 请求分页查询数据
    this.load()
  },
  methods: {
    // 获取数据
    load() {
      this.isLoading = true

      this.$http
        .get('/file/page', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name
          }
        })
        .then(res => {
          this.isLoading = false

          console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.records
            this.total = res.data.total
          } else {
            alert('获取数据失败')
          }
        })
    },
    reset() {
      this.name = ''
      this.load()
    },
    changeEnable(row) {
      this.$http.post('/file/update', row).then(res => {
        if (res.code == '200') {
          this.$message.success('操作成功')
        }
      })
    },
    handleDel(id) {
      this.$http.delete('/file/' + id).then(res => {
        if (res.code == '200') {
          this.$message.success('删除成功')
          this.load()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    handleDelBatch() {
      let ids = this.multipleSelection.map(v => v.id)
      this.$http.post('/file/del/batch', ids).then(res => {
        if (res.code == '200') {
          this.$message.success('批量删除成功')
          this.load()
        } else {
          this.$message.error('批量删除失败')
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    handleFileUploadSuccess() {
      this.load()
    },
    download(url) {
      window.open(url)
    },
    preview(url) {
      // window.open(
      //   'https://files.keking.cn/onlinePreview?url=' +
      //     encodeURIComponent(window.btoa(url))
      // )
      const allowedExtensions = [
        '.jpg',
        '.jpeg',
        '.png',
        '.gif',
        '.bmp',
        '.webp'
      ] // 常见图片扩展名列表

      if (!allowedExtensions.some(ext => url.toLowerCase().endsWith(ext))) {
        return this.$message.warning('此类文件不支持预览')
      }
      this.centerDialogVisible = true
      this.previewImg = url
    }
  }
}
</script>

<style scoped>
::v-deep .el-table__body-wrapper {
  overflow: hidden !important;
}
::v-deep .el-dialog__header {
  padding: 0;
}
::v-deep .el-dialog--center .el-dialog__body {
  text-align: initial;
  padding: 0;
}
</style>
